/* 各大块样式 */
/* 设置网页页面宽度使得大图片得以居中 */
body {
    width: 1920px;
    margin: auto;
}
.content {
    width: 1200px;
    height: 100%;
    /* background-color: rgb(11, 148, 248); */
    margin: 0 auto;
    overflow: hidden;
}
.top {
    width: 100%;
    height: 814 px;
    margin: 0 auto;
    position: relative;
} 
.detail {
    height: 1324px;
    /* background-color: #eae7e8; */
}
.purchase {
    width: 100%;
    height: 388px;
    /* background-color: green; */
    position: relative;
}
.recommend {
    width: 100%;
    height: 445px;
    background-color: #6f6d6d;
    position: relative;
}
.products {
    width: 100%;
    height: 918px;
    /* background-color: yellow; */
    position: relative;
}
.new {
    width: 100%;
    height: 655px;
    background-color: #6f6d6d;
    position: relative;
}
.bottom {
    height: 1013px;
    /* background-color: black; */
    position: relative;
}


/* 顶端，包括背景图+灰色遮罩+英文 顶端导航 */
/* 背景图 */
.top_back {
    margin: auto;
}
#top_best {
    display: block;
    position: absolute;
    top: 330px;
    left: 448px;
    z-index: 5;
}
#top_grey {
    opacity: 0.5;
    position: absolute;
    z-index: 1;
}
/* 顶端导航 */
.top_title {
    height: 98 px;
    display: flex;
    justify-content: space-around;
    position: absolute;
    top: 0px;
    left: 440px ;
    z-index: 3;
}
.top_title div {
    font-size: 22px;
    width: 174px;
    height: 100%;
    line-height: 98px;
    color: white;
    font-weight: 900;
    text-align: center;
}
#top_box {
    width: 230px;
    height: 98px;
    background-color: #e8024d;
    color: black;
    text-align: center;
}
#top_box .LAMY {
    margin-top: 18px;
    width: 200px;
    height: 26px;
    line-height: 30px;
    color: black;
}
#top_box .design {
    font-size: 14px;
    height:16px ;
    margin-top: 30px;
    line-height: 20px;
    color: black;
}

/* 第二部分，包括欢迎和三分栏文字介绍及按钮 */
/* 欢迎部分 */
.det_wel {
    width: 1150px;
    height: 505px;
    margin: 67px 0px 158px 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    background-color: #eae7e8;
}
.det_wel_img {
    width: 420px;
    height: 100%;
}
.det_wel_word {
    width: 590px;
    height: 100%;
    text-align: center;
    /* margin: auto 0px; */
    font-size: 18px;
    line-height: 26px;
    position: relative;
    right: 55px;
    top: 75px;
}
.det_wel_video {
    width: 365px;
    height: 240px;
    position: absolute;
    background-color: #ef4d82;
    left: 120px;
    top: 335px;
}
#wel_video_start {
    position: absolute;
    top: 72px;
    left: 152px;
}
/* 三分栏的文字介绍 */
.det_kinds_word {
    width: 1200px;
    height: 250px;
    display: grid;
    grid-template-rows:repeat(5,1fr);
    grid-template-columns:repeat(3,1fr);
    grid-column-gap: 3px;
} 
.ktitle1 {
    grid-row: 1/3;
    grid-column: 1/2;
}
.ktitle2 {
    grid-row: 1/3;
    grid-column: 2/3;
}
.ktitle3 {
    grid-row: 1/3;
    grid-column: 3/4;
}
.kword1 {
    grid-row: 3/6;
    grid-column: 1/2;
}
.kword2 {
    grid-row: 3/6;
    grid-column: 2/3;
}
.kword3 {
    grid-row: 3/6;
    grid-column: 3/4;
}
.det_kinds_title {
    width: 100%;
    height: 150px;
    position: relative;
    left: 475px;
}
.det_kinds_ktitle div{
    font-size: 24px;
}
.det_kinds_word div {
    width: 375px;
    height: 180px;
    text-align: center;
    margin: auto;
} 
/* 按钮 */
#content1 {
    position: relative;
}
.button1 {
    width: 240px;
    height: 64px;
    color: white;
    text-align: center;
    line-height: 64px;
    background-color: black;
    position: absolute;
    left: 475px;
    bottom: 30px;
}

/* 第三部分 包括：两张并列的粉黄钢笔+一个小logo  */
#twoPens {
    margin: auto;
}
.logo {
    width: 90px;
    height: 38px;
    background-color: #e8024d;
    position: absolute;
    top: 195px;
    left: 400px ;
}

/* 第四部分 评价卡片 */
.rec_title {
    width: 312px;
    height: 63px;
    margin: 120px auto 310px;
}
.rec_card {
    width: 814px;
    height: 273px;
    position: absolute;
    z-index: 1;
    top: 170px;
    left: 545px;
    background-color: white;
}
.rec_card_img {
    width: 73px;
    height: 73px;
    border-radius: 50px;
    margin: 40px auto 200px;
}
.rec_card_word {
    width: 522px;
    height: 58px;
    text-align: center;
    position: absolute;
    z-index: 3;
    top: 160px;
    left: 145px;
}

/* 第五部分 包括往期产品汇总（6张图片）(grid布局实现)+一个按钮 */
.photos {
    width: 880px;
    height: 550px;
    position: relative;
    top: 180px;
    left: 540px;
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    grid-template-columns:repeat(7,1fr);
    grid-gap: 70px 20px;
}
.p1 {
    grid-row: 1/5;
    grid-column:1/2;
}
.p2 {
    grid-row: 1/3;
    grid-column:2/3;
}
.p3 {
    grid-row: 1/5;
    grid-column:3/4;
}
.p4 {
    grid-row: 5/8;
    grid-column:1/2;
}
.p5 {
    grid-row: 6/8;
    grid-column:2/3;
}
.p6 {
    grid-row: 5/8;
    grid-column:3/4;
}
.button2 {
    width: 240px;
    height: 64px;
    margin: 60px auto 0px;
    color: white;
    text-align: center;
    background-color: black;
    line-height: 64px;
    position: absolute;
    bottom: 40px;
    left: 840px;
}
/* 第六部分 包括新品推荐+一个按钮*/
.box {
    width: 875px;
    height: 435px;
    background-color: white;
    position: relative;
    top: 90px;
    left: 525px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
.button3 {
    width: 240px;
    height: 64px;
    margin: 60px auto 0px;
    color: white;
    text-align: center;
    background-color: #e8024d;
    line-height: 64px;
    position: absolute;
    bottom: 30px;
    left: 900px;
}
.box img {
    float: left;
}

/* 第七部分 为底端 包括背景图+英文 */
.bottom {
    margin: auto;
}
/* #top_best {
    display: block;
    position: absolute;
    top: 330px;
    left: 448px;
    z-index: 5;
} */
#bottom_grey {
    opacity: 0.5;
    position: absolute;
    z-index: 1;
}
.writing p,
.writing h1 {
    position: absolute;
    float: left;
}
.w1 {
    top: 260px;
    left: 680px;
}
.w2 {
    top:200px;
    left: 840px;
    color:#b9b8b8;
    font-size: 82px;
}
.w3 {
    top: 260px;
    right: 680px;
}